<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<title>管理页面</title>

</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>管理权限 </a></li>
					<li class="active">分配商人</li>
				</ul>
			</div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">查询条件</div>
					<div class="panel-body">
						<div class="panel-body" style="height: 65px">
							<form id="formSearch" class="form-horizontal">
								<input type="hidden" id="queryForm" value="disable">
								<div class="form-group" style="">
									<div class="form-inline col-md-2">
										名称：<input type="text" class="form-control"
											id="txt_search_merchantName">
									</div>
									<div class="form-inline col-md-2">
										手机：<input type="text" class="form-control"
											id="txt_search_merchantPhone">
									</div>
									<div class="form-inline col-md-3" id="workerStatusDiv">
										账号分配：<label> <input type="radio" value="0"
											name="radioAlreayAllo" checked> 未分配&nbsp;&nbsp;&nbsp;
										</label><label> <input type="radio" name="radioAlreayAllo"
											value="1"> 已分配&nbsp;&nbsp;&nbsp;
										</label>
									</div>
									<div class="form-inline col-md-2" style="text-align: left;">
										<button type="button" style="margin-left: 50px" id="btn_query"
											class="btn btn-primary">查询</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div id="toolbar" class="btn-group">
					<button id="btn_edit" type="button" class="btn btn-default">
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>分配所选
					</button>
					<label> &nbsp;&nbsp;&nbsp;&nbsp;注释：未分配中查询没有展示的请到已分配查询。</label>
				</div>
				<table id="tb_merchant"></table>
			</div>
		</div>
	</section>
	<!-- 为内部工人分配商人的模态框 -->
	<div class="modal fade" style="top: 10px;" id="allocateMerchantMoal"
		tabindex="-1" role="dialog"
		aria-labelledby="allocateMerchantMoalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 1000px; height: 700px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="allocateMerchantMoalLabel">可分配员工</h4>
				</div>
				<div class="modal-body">
					<table id="tb_internalWorker"></table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-warning"
						onclick='allocateMerchantSubmit()'>确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<!-- tables插件的引用 -->
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet"
	href="${ctxPath}/static/js/useful-ztree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${ctxPath}/static/js/useful-ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/useful-ztree/js/jquery.ztree.excheck-3.5.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="${ctxPath}/static/js/bootstrap-select/css/bootstrap-select.min.css">

<script
	src="${ctxPath}/static/js/bootstrap-select/js/bootstrap-select.min.js"></script>
<script
	src="${ctxPath}/static/js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		$("#btn_query").click(function() {
			var opt = {
				
				pageNumber : 1,
				query : {
					offset : 0
				}
			};
			//从新开始计数
			$("#tb_merchant").bootstrapTable('refresh', opt);
		});
		$("#btn_edit").click(
				function() {
					var length = $("#tb_merchant").bootstrapTable(
							'getSelections').length;
					if (length == 0) {
						toastr.error("不能所选为空");
					} else {
						var opt = {
							
							pageNumber : 1,
							url : '${ctxPath}/internalWorker/queryByPage',
							query : {
								offset : 0
							}
						};
						//从新开始计数
						$("#tb_internalWorker").bootstrapTable('refresh', opt);
						//从新开始计数
						$("#allocateMerchantMoal").modal('show');

					}

				});
		$('#tb_internalWorker').bootstrapTable({
			method : 'post', //请求方式（*）
			striped : true, //是否显示行间隔色
			cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination : true, //是否显示分页（*）
			sortable : false, //是否启用排序
			sortName : 'id',
			sortOrder : "desc", //排序方式
			sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, //初始化加载第一页，默认第一页
			pageSize : 6, //每页的记录行数（*）
			search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			strictSearch : false,
			showColumns : false, //是否显示所有的列
			showRefresh : true, //是否显示刷新按钮
			minimumCountColumns : 2, //最少允许的列数
			clickToSelect : false, //是否启用点击选中行
			height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId : "id", //每一行的唯一标识，一般为主键列
			showToggle : true, //是否显示详细视图和列表视图的切换按钮
			cardView : false, //是否显示详细视图
			detailView : false, //是否显示父子表
			singleSelect : true,
			contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
			queryParams : function(params) {
				var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit : params.limit, //页面大小
					offset : params.offset, //页码
					order : params.order,
					sort : params.sort,
				};
				return temp;
			},
			columns : [ {
				checkbox : true,
				width : '8%',
				title : '选中框'
			}, {
				field : 'workerCode',
				title : '员工标识',
				align : 'center',
				width : '10%'
			}, {
				field : 'createTime',
				title : '创建日期',
				align : 'center',
				width : '20%'
			}, {
				field : 'provinces',
				title : '管理省份',
				align : 'left',
				width : '50%',
				formatter : function(value, row, index) {
					var returnValue = "";
					$(value).each(function(index, currData) {
						returnValue = returnValue + " " + currData.name;
					})
					return returnValue;
				}
			} ]
		});
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_merchant')
					.bootstrapTable(
							{
								url : '${ctxPath}/merchant/queryByPageAndQueryStatus', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								sortName : 'merchantsId',
								sortOrder : "desc", //排序方式
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 8, //每页的记录行数（*）
								pageList : [ 8, 25, 50, 100 ],
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : true, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								uniqueId : "id", //每一行的唯一标识，一般为主键列
								showToggle : true, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											checkbox : true,
											width : '2%'
										},
										{
											field : 'name',
											title : '商家姓名',
											align : 'center',
											width : '10%'
										},
										{
											field : 'wallet',
											title : '钱包余额（元）',
											align : 'center',
											width : '10%'
										},
										{
											field : 'phone',
											title : '手机号',
											align : 'center',
											width : '10%'
										},
										{
											field : 'companyName',
											title : '公司名称',
											align : 'center',
											width : '10%',
										},
										{
											field : 'join_date',
											title : '创建日期',
											align : 'center',
											width : '10%',
										},
										{
											field : 'internalWorkerCode',
											title : '分配员工',
											align : 'center',
											width : '10%',
											formatter : function(value, row,
													index) {
												if (value == ''
														|| value == null) {
													return '<font color="red">未设置</font>'
												} else {
													return value;
												}
											}
										} ]
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				order : params.order,
				sort : params.sort,
				merchantName : $('#txt_search_merchantName').val(),
				merchantPhone : $('#txt_search_merchantPhone').val(),
				queryStatus : $("input[name='radioAlreayAllo']:checked").val()
			};
			return temp;
		};
		return oTableInit;
	};
	function allocateMerchantSubmit() {
		var workerRow = $("#tb_internalWorker").bootstrapTable('getSelections');
		if (workerRow.length == 0) {
			toastr.error("不能所选为空");
		} else {
			//收集信息
			//分配给的员工是
			console.info($("#tb_internalWorker")
					.bootstrapTable('getSelections')[0].id);
			//分配给员工的商人是
			console.info(getALLCheckedCheckboxs());
			$.post('${ctxPath}/merchant/allocateMerchants', {
				interID : $("#tb_internalWorker").bootstrapTable(
						'getSelections')[0].id,
				merchants : getALLCheckedCheckboxs()
			}, function(data) {
				var opt = {
					
					pageNumber : 1,
					query : {
						offset : 0
					}
				};
				//从新开始计数
				$("#tb_merchant").bootstrapTable('refresh', opt);
				toastr.success("成功设置");
				$("#allocateMerchantMoal").modal('hide');
			});
		}
	}
	//获取所有的选中的checkbox
	function getALLCheckedCheckboxs() {
		var arrselections = $("#tb_merchant").bootstrapTable('getSelections');
		//获取所有的状态
		var alreayCheckboxs = "";
		$(arrselections).each(function(i) {
			alreayCheckboxs += ("," + this.merchantsId);
		});
		return alreayCheckboxs.substring(1);
	}
</script>
</html>
